<template>
  <div class="jbc-container">
    <jbc-menu />
    <div class="jbc-payment" v-loading="loading">
      <el-breadcrumb v-if="pathList.length" style="margin-top: 5px;padding: 12px 0 20px;" :separator-icon="ArrowRight">
        <el-breadcrumb-item v-for="path in pathList" :key="path.id" :to="path.url">{{ path.name }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="jbc-box">
        <div class="order-result">
          <div class="order-result__title">
            <el-icon class="order-result__icon">
              <SuccessFilled />
            </el-icon>恭喜您，{{shopType === '1' ? '支付成功' : '提交成功'}}
          </div>
          <div class="order-result__subtitle">
            <template v-if="logisticsType === '3'">请凭自提码，到门店自行提取</template>
            <template v-else-if="shopType === '2'">请耐心等待审核，保持手机畅通</template>
            <template v-else>请耐心等待发货，保持手机畅通</template>
          </div>
          <div class="order-result__code">
            <div v-show="checkCode" class="code">
              <div class="code-title">自提码</div>
              <div class="code-code">{{ checkCode }}</div>
            </div>
          </div>
          <div class="order-result__extra">
            <el-button class="link-button" @click="gotoOrder" style="height: 46px;" plain>查看订单</el-button>
            <el-button class="link-button" color="#D6000F" style="height: 46px;" @click="gotoIndex">继续购物</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="payFinal">
import { ArrowRight, SuccessFilled } from "@element-plus/icons-vue"
import { appOrderByIdGet } from '@/api/order'
const { proxy } = getCurrentInstance()
const pathList = [{ id: '1', name: '首页', url: '/' }, { id: '2', name: '支付成功' }]
const router = useRouter()
const route = useRoute()
const loading = ref(true)
const orderInfo = ref({}) // 订单信息

// 快递类型 1:快递 2:物流 3:自提-query
const logisticsType = ref('1')
const checkCode = ref('')
const shopType = ref('')

route.params.id && appOrderByIdGet({ params: { id: route.params.id } }).then((res) => {
  orderInfo.value = res.data
  checkCode.value = res.data.checkCode
  logisticsType.value = res.data.logisticsType
  shopType.value = res.data.shopVo.type
}).catch((err) => {
  console.log(err)
}).finally(() => {
  loading.value = false
})
const gotoOrder = () => {
  router.push({ name: 'order' })
}
const gotoIndex = () => {
  router.push({ name: 'index' })
}
</script>

<style lang="scss" scoped>
.jbc {
  &-payment {
    margin: 0 auto;
    width: var(--box-width);
  }

  &-box {
    background-color: #FFFFFF;
    border-radius: 20px;
    box-sizing: border-box;
    padding: 30px;

    &~& {
      margin-top: 20px;
    }
  }


}

.order-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .order-result__title {
    font-weight: bold;
    font-size: 26px;
    color: var(--jbc-color);
    line-height: 35px;
    display: flex;
    align-items: center;

    .order-result__icon {
      font-size: 32px;
      margin-right: 10px;
    }
  }

  .order-result__subtitle {
    font-size: var(--jbc-font-size-medium);
    color: var(--jbc-font-color);
    line-height: 21px;
    margin-top: 18px;
  }

  .order-result__code {
    margin-top: 32px;
    text-align: center;

    .code {
      background: #F8F8F8;
      border-radius: 8px;
      padding: 40px 114px;
      font-weight: bold;
      font-size: 22px;
      color: #323232;
      line-height: 30px;

      &-title {
        font-weight: normal;
        font-size: 18px;
        color: #666666;
        line-height: 24px;
        margin-bottom: 6px;
      }
    }
  }

  .order-result__extra {
    margin-top: 57px;
    display: flex;
    justify-content: center;
  }
}
</style>